<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>日志信息</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>

<div class="container">
    <%--条件查询--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">条件查询</div>
                <div class="panel-body">

                    <form class="form-horizontal">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">真实姓名</label>
                            <div class="col-sm-3">
                                <input type="text" id="realName" class="form-control" placeholder="请输入真实姓名">
                            </div>

                            <label class="col-sm-1 control-label">登录名</label>
                            <div class="col-sm-5">
                                <input type="text" id="userName" class="form-control" placeholder="请输入登录名">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">操作信息</label>
                            <div class="col-sm-3">
                                <input type="text" id="info" class="form-control" placeholder="请输入操作信息">
                            </div>

                            <label class="col-sm-1 control-label">操作时间</label>
                            <div class="col-sm-5" style="display: flex">
                                <input type="text" id="startDate" class="form-control" placeholder="请选择起始日期">
                                <span class="btn"><i class="glyphicon glyphicon-time"></i></span>
                                <input type="text" id="endDate" class="form-control" placeholder="请选择结束日期">
                            </div>
                        </div>

                        <div class="btn-group col-lg-offset-5" role="group">
                            <button type="button" class="btn btn-success" onclick="search();">查询</button>
                            <button type="reset" class="btn btn-warning">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--列表展示--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">用户列表</div>

                    <div class="panel-body">
                        <table id="myTable" class="display table-bordered">
                            <thead>
                            <th>真实姓名</th>
                            <th>登录名</th>
                            <th>操作信息</th>
                            <th>操作时间</th>
                            <th>详细参数</th>
                            </thead>
                            <tfoot class="text-center">
                            <th>真实姓名</th>
                            <th>登录名</th>
                            <th>操作信息</th>
                            <th>操作时间</th>
                            <th>详细参数</th>
                            </tfoot>
                        </table>
                    </div>
            </div>
        </div>
    </div>
</div>


<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    //页面入口函数
    $(function (){
        logTableList();//列表展示
        initDate();//初始化日期
    })

    //条件查询
    function search(){
        var param = {}
        param.realName = $("#realName").val();
        param.userName = $("#userName").val();
        param.info = $("#info").val();
        param.startDate = $("#startDate").val();
        param.endDate = $("#endDate").val();

        logTable.settings()[0].ajax.data = param;
        logTable.ajax.reload();
    }

    //列表展示
    function logTableList(){
        logTable = $("#myTable").DataTable({
            // 开启Datatables服务器模式
            // DataTables有两种基本的工作模式可供选择：
            // 客户端处理模式——此模式下如：过滤、分页、排序的处理都在浏览器中进行。
            // 服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
            serverSide: true,

            language: {
                "url":'/js/DataTables/Chinese.json'
            },

            //开启垂直滚动条（X水平，Y垂直）
            // "scrollY": true ,
            //设置固定高度为200px 数据量溢出时出现滚动条
            // "scrollY": "200px",
            // "scrollCollapse": "true",

            //禁用排序
            "ordering": false,

            //禁用本地搜索
            "searching": false,

            // 设置每页显示条数下拉框的值
            "lengthMenu": [5, 7, 10],

            "ajax": {
                "type":"post",
                "url":"/log/list.do",
            },

            "columns": [// 返回数据是对象列表的时候需要使用如下方式与字段一一对应
                {"data": "realName" },
                {"data": "userName" },
                {"data": "info" },
                {"data": "infoTime"},
                {"data": "id",
                    render:function (data, type, row, meta){
                        var v_detail = row.detail;
                        return '<button type="button" class="btn btn-warning btn-sm" onclick="findDetail(\''+v_detail+'\')"><span class="glyphicon glyphicon-pencil"></span> 查看详情</button>'
                    }
                },
            ]
        });
    }

    function findDetail(info){
        bootbox.confirm({
            message: info,
            size: 'small',
            title: "提示信息",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){

            }
        });
    }

    // 初始化日期组件
    function initDate() {
        $('#startDate').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: 'zh-CN',
            showClear: true,
        });
        $('#endDate').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            locale: 'zh-CN',
            showClear: true,
        });
    }
</script>
</body>
</html>
